<template>
  <div class="widget-item-container">
    <a-form-item
      v-if="element"
      :key="element.key"
      class="widget-view"
      :colon="false"
      :class="{ active: selectWidget?.key === element.key, repeat: repeatFieldIds.includes(element.key) }"
      :rules="element.options.rules"
    >
      <template v-if="element.type !== 'text'" #label>
        {{ !element.options.showLabel ? element.fieldName : '' }}
        <a-tooltip v-if="element.options.hidePromptFlag && !element.options.showLabel">
          <template #title>{{ element.options.promptInfo }}</template>
          <i
            class="wentishuoming icpIconfont hover-primary cursor-pointer"
            style="font-size: 20px; line-height: normal"
          ></i>
        </a-tooltip>
      </template>
      <template v-if="element.options.visibleFlag">
        <template v-if="element.type === 'input'">
          <a-input
            readonly
            :size="config.size"
            :value="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :placeholder="element.options.placeholder"
            :maxlength="parseInt(element.options.maxlength)"
            :prefix="element.options.prefix"
            :suffix="element.options.suffix"
            :addon-before="element.options.addonBefore"
            :addon-after="element.options.addonAfter"
            :allow-clear="element.options.allowClear"
            :disabled="element.options.disabled"
          />
        </template>

        <template v-if="element.type === 'password'">
          <a-input-password
            readonly
            :size="config.size"
            :value="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :placeholder="element.options.placeholder"
            :maxlength="element.options.maxlength"
            :prefix="element.options.prefix"
            :suffix="element.options.suffix"
            :addon-before="element.options.addonBefore"
            :addon-after="element.options.addonAfter"
            :allow-clear="element.options.allowClear"
            :disabled="element.options.disabled"
            :visibility-toggle="element.options.visibilityToggle"
          />
        </template>

        <template v-if="element.type === 'textarea'">
          <a-textarea
            style="resize: none"
            readonly
            :size="config.size"
            :rows="element.options.rows"
            :value="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :placeholder="element.options.placeholder"
            :maxlength="element.options.maxlength"
            :show-count="element.options.showCount"
            :auto-size="element.options.autoSize"
            :allow-clear="element.options.allowClear"
            :disabled="element.options.disabled"
          />
        </template>

        <template v-if="element.type === 'number'">
          <a-input-number
            readonly
            :size="config.size"
            :value="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :controls="false"
            decimal-separator="2"
            :disabled="element.options.disabled"
            :placeholder="element.options.placeholder"
            :formatter="
              (value) =>
                element.options.numericFormat == 1 ? value + '' : `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            "
            :parser="(value) => (element.options.numericFormat == 1 ? value : value.replace(/\￥\s?|(,*)/g, ''))"
          />
        </template>

        <template v-if="element.type === 'radio'">
          <a-radio-group
            :size="config.size"
            :value="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :disabled="element.options.disabled"
          >
            <a-radio
              v-for="item of element.options.options"
              :key="item.value"
              :value="item.value"
              :style="{
                display: element.options.inline ? 'inline-block' : 'block'
              }"
            >
              {{ item.label }}
            </a-radio>
          </a-radio-group>
        </template>

        <template v-if="element.type === 'checkbox'">
          <a-checkbox-group
            :value="element.options.defaultOptions"
            :style="{ width: element.options.width }"
            :disabled="element.options.disabled"
          >
            <a-checkbox
              v-for="item of element.options.options"
              :key="item.value"
              :value="item.value"
              :style="{
                display: element.options.inline ? '' : 'block'
              }"
            >
              {{ item.label }}
            </a-checkbox>
          </a-checkbox-group>
        </template>

        <template v-if="element.type === 'time'">
          <a-time-picker
            :size="config.size"
            :value="element.options.defaultValue"
            :placeholder="element.options.placeholder"
            :input-read-only="element.options.readonlyFlag === 1"
            :allow-clear="element.options.allowClear"
            :format="element.options.format"
            :value-format="element.options.format"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
          />
        </template>

        <template v-if="element.type === 'date'">
          <a-date-picker
            :size="config.size"
            :value="element.options.defaultValue"
            :placeholder="element.options.placeholder"
            :input-read-only="element.options.readonlyFlag === 1"
            :allow-clear="element.options.allowClear"
            :picker="getDatePickerType(element.options.dateType)"
            :format="getDatePickerFormat(element.options.dateType, element.options.dateFormat).label"
            :value-format="getDatePickerFormat(element.options.dateType, element.options.dateFormat).label"
            :show-time="getDatePickerShowTime(element.options.dateType)"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
          />
        </template>

        <template v-if="element.type === 'rate'">
          <a-rate
            :value="element.options.defaultValue"
            :count="element.options.max"
            :allow-half="element.options.allowHalf"
            :allow-clear="element.options.allowClear"
            :disabled="element.options.disabled"
          />
        </template>

        <template v-if="element.type === 'select'">
          <template v-if="element.options.multipleFlag">
            <a-select
              :size="config.size"
              mode="multiple"
              :value="element.options.defaultOptions"
              :placeholder="element.options.placeholder"
              :filter-option="handleFilterOption"
              :allow-clear="element.options.clearable"
              :show-search="element.options.showSearch"
              :disabled="element.options.disabled"
              :style="{ width: element.options.width }"
              @change="selectChange"
            >
              <a-select-option
                v-for="item of element.options.options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>
          <template v-else>
            <a-select
              :size="config.size"
              :value="element.options.defaultValue"
              :placeholder="element.options.placeholder"
              :filter-option="handleFilterOption"
              :allow-clear="element.options.clearable"
              :show-search="element.options.showSearch"
              :disabled="element.options.disabled"
              :style="{ width: element.options.width }"
              @change="selectChange"
            >
              <a-select-option
                v-for="item of element.options.options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>
        </template>

        <template v-if="element.type === 'switch'">
          <a-switch
            :size="config.size === 'large' ? 'default' : config.size"
            :checked="element.options.defaultValue"
            :checked-children="element.options.checkedChildren"
            :un-checked-children="element.options.unCheckedChildren"
            :disabled="element.options.disabled"
          />
        </template>

        <template v-if="element.type === 'slider'">
          <a-slider
            :value="element.options.defaultValue"
            :min="element.options.min"
            :max="element.options.max"
            :step="element.options.step"
            :range="element.options.range"
            :reverse="element.options.reverse"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
          />
        </template>

        <template v-if="element.type == 'text'">
          <h1>
            <span v-if="!element.options.showLabel">{{ element.fieldName }}</span>
            <a-tooltip v-if="element.options.hidePromptFlag">
              <template #title>{{ element.options.promptInfo }}</template>
              <i
                class="wentishuoming icpIconfont hover-primary cursor-pointer"
                style="font-size: 20px; line-height: normal"
              ></i>
            </a-tooltip>
          </h1>
          <span v-if="!element.options.hidePromptFlag && element.options.promptInfo" class="filed-desc">{{
            element.options.promptInfo
          }}</span>
          <a-divider v-if="element.options.showDivider" style="margin: 0" />
        </template>

        <template v-if="element.type === 'upload'">
          <UploadFile :disabled="true" />
          <!-- <a-upload
            :name="element.options.file"
            :action="element.options.action"
            :accept="element.options.accept"
            :file-list="element.options.defaultValue"
            :list-type="element.options.listType"
            :multiple="element.options.multiple"
            :disabled="element.options.disabled"
          >
            <SvgIcon v-if="element.options.listType === 'picture-card'" name="insert" prefix="icon-form" />
            <a-button v-else>
              <SvgIcon name="img-upload" prefix="icon-form" style="margin-right: 10px" />
              点击上传
            </a-button>
          </a-upload> -->
        </template>

        <template v-if="element.type === 'img-upload'">
          <a-upload
            :name="element.options.file"
            :action="element.options.action"
            :accept="element.options.accept"
            :file-list="element.options.defaultValue"
            :list-type="element.options.listType"
            :multiple="element.options.multiple"
            :disabled="element.options.disabled"
          >
            <SvgIcon v-if="element.options.listType === 'picture-card'" name="insert" prefix="icon-form" />
            <a-button v-else>
              <SvgIcon name="img-upload" prefix="icon-form" style="margin-right: 10px" />
              点击上传
            </a-button>
          </a-upload>
        </template>

        <template v-if="element.type === 'richtext-editor'">
          <!-- <RichTextEditor
          :value="element.options.defaultValue"
          :disable="element.options.disabled"
          :style="{ width: element.options.width }"
        /> -->
        </template>

        <template v-if="element.type === 'cascader'">
          <a-cascader
            :size="config.size"
            :value="element.options.defaultOptions"
            :options="element.options.remoteOptions"
            :placeholder="element.options.placeholder"
            :allow-clear="element.options.allowClear"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
          />
        </template>
        <template v-if="element.type === 'treeSelect'">
          <TreeSelectInput
            :is-https="false"
            :data-list="element.options.remoteOptions"
            :style="{ width: element.options.width }"
          ></TreeSelectInput>
        </template>
        <p
          v-if="element.type !== 'text' && !element.options.hidePromptFlag && element.options.promptInfo"
          class="filed-desc"
        >
          {{ element.options.promptInfo }}
        </p>
      </template>
      <template v-else>
        <div style="width: 100%; text-align: center; border: 1px dashed #ccc; color: #ccc; line-height: 32px">
          隐藏字段
        </div>
      </template>
    </a-form-item>
    <div v-if="selectWidget?.key === element.key" class="widget-view-action">
      <!-- <SvgIcon name="copy" prefix="icon-form" color="#fff" @click.stop="$emit('copy')" /> -->
      <SvgIcon
        v-if="isConfig() || element.options.allowDeleteFlag === 1"
        name="delete"
        prefix="icon-form"
        color="#fff"
        @click.stop="$emit('delete')"
      />
    </div>

    <div v-if="selectWidget?.key === element.key" class="widget-view-drag">
      <SvgIcon name="move" prefix="icon-form" color="#fff" class="drag-widget" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, inject } from 'vue'
// import SvgIcon from '@/components/SvgIcon.vue'
// import RichTextEditor from '@/components/RichTextEditor.vue'
import { WidgetForm } from '@@/enums/customFormEnums'
import { getDatePickerType, getDatePickerFormat, getDatePickerShowTime } from '../config'
import { isConfig } from '@@/utils/index'

export default defineComponent({
  name: 'AntdWidgetFormItem',
  components: {
    // SvgIcon,
    // RichTextEditor
  },
  props: {
    config: {
      type: Object as PropType<WidgetForm['config']>,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    selectWidget: {
      type: Object
    }
  },
  emits: ['copy', 'delete'],
  setup(props) {
    const repeatFieldIds: string[] = inject('repeatFieldIds') as string[]
    const handleFilterOption = (input: string, option: { label: string }) => option.label.toLowerCase().includes(input)
    const selectChange = (el: any) => {
      console.log(el)
      console.log(props.element)
    }

    return {
      repeatFieldIds,
      handleFilterOption,
      selectChange,
      getDatePickerType,
      getDatePickerFormat,
      getDatePickerShowTime,
      isConfig
    }
  }
})
</script>
<style lang="less">
.widget-item-container {
  .repeat {
    box-shadow: 0 0 9px 2px #f00;
  }
}
</style>
